<template>
  <div>
    <i
      v-if="props.id === 0"
      class="iconfonts"
      :style="{
        fontSize: '20px',
        color: colorList5[store.styleInfo.colorType - 1].themeColor,
      }"
    >
      &#xe622;
    </i>
    <i
      v-if="props.id === 1"
      class="iconfonts"
      :style="{
        fontSize: '20px',
        color: colorList5[store.styleInfo.colorType - 1].themeColor,
      }"
    >
      &#xe627;
    </i>
    <i
      v-if="props.id === 4"
      class="iconfonts"
      :style="{
        fontSize: '20px',
        color: colorList5[store.styleInfo.colorType - 1].themeColor,
      }"
    >
      &#xe623;
    </i>
    <i
      v-if="props.id === 5"
      class="iconfonts"
      :style="{
        fontSize: '20px',
        color: colorList5[store.styleInfo.colorType - 1].themeColor,
      }"
    >
      &#xe626;
    </i>
    <i
      v-if="props.id === 3"
      class="iconfonts"
      :style="{
        fontSize: '20px',
        color: colorList5[store.styleInfo.colorType - 1].themeColor,
      }"
    >
      &#xe624;
    </i>
    <i
      v-if="props.id === 2"
      class="iconfonts"
      :style="{
        fontSize: '20px',
        color: colorList5[store.styleInfo.colorType - 1].themeColor,
      }"
    >
      &#xe625;
    </i>
  </div>
</template>

<script setup lang="ts">
import { useProjectStore } from '@/store';
import { colorList5 } from '../../data';
const store = useProjectStore();
const props = defineProps({
  id: {
    type: Number,
  },
});
</script>

<style scoped lang="less"></style>
